<!--
 * @Descripttion: 修改密码
 * @Author: YuZhenJing
 * @Date: 2020-01-12 12:01:01
 * @LastEditors: YuZhenJing
 * @LastEditTime: 2020-05-15 10:42:38
 -->
<template>
  <div class="update-password">
    <tf-dialog
      :title="windowInfo.title"
      :title-icon="windowInfo.titleIcon"
      :visible.sync="tfVisible"
      :width="windowInfo.width"
    >
      <template v-slot:content>
        <el-card shadow="never">
          <el-form :model="formItem" :rules="rules" label-width="100px" ref="upPwdForm">
            <el-row :gutter="12">
              <el-col :span="24">
                <el-form-item label="原密码" prop="oldPassword">
                  <el-input v-model="formItem.oldPassword" type="password"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="新密码" prop="newPassword">
                  <el-input v-model="formItem.newPassword" type="password"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="确认密码" prop="confirmPassword">
                  <el-input v-model="formItem.confirmPassword" type="password"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </template>
      <template v-slot:footer>
        <el-row :gutter="12" style="padding:5px;">
          <el-col :span="24" style="text-align:center">
            <el-button
              :loading="saveLoading"
              @click="submitForm"
              icon="el-icon-circle-plus-outline"
              type="primary"
            >保存</el-button>
          </el-col>
        </el-row>
      </template>
    </tf-dialog>
  </div>
</template>
<script>
export default {
  components: {
    'tf-dialog': require('@/components/common/dialog/TfDialog').default
  },
  props: {
    visible: {
      type: Boolean,
      required: true,
      default: false
    }
  },
  computed: {
    tfVisible: {
      get() {
        if (this.visible) {
          this.initUserInfo()
        }
        return this.visible
      },
      set(s) {
        // 重置表单
        this.$refs.upPwdForm.resetFields()
        this.$emit('update:visible', s)
      }
    }
  },
  data() {
    //比较两次密码一致性
    let sameAsPassword = (rule, value, callback) => {
      if (value == this.formItem.newPassword) {
        return callback()
      } else {
        return callback(new Error('输入的密码不一致!'))
      }
    }

    return {
      // 窗体信息
      windowInfo: {
        titleIcon: 'lab la-rev',
        title: '修改密码',
        width: '500px'
      },
      saveLoading: false,
      rules: {
        oldPassword: [
          { required: true, message: '原密码不能为空!', trigger: 'blur' },
          { max: 50, message: '原密码不得超过【50】个字符', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: '新密码不能为空!', trigger: 'blur' },
          { max: 50, message: '新密码不得超过【50】个字符', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '确认密码不能为空!', trigger: 'blur' },
          { validator: sameAsPassword, trigger: 'blur' }
        ]
      },
      formItem: {
        userId: '',
        personName: '',
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      }
    }
  },
  methods: {
    initUserInfo() {
      const userInfo = this.$auth.userInfo.get()
      if (userInfo) {
        this.formItem.userId = userInfo.userId
        this.windowInfo.title = '【' + userInfo.personName + '】修改密码'
      }
    },
    // 提交表单保存用户信息
    submitForm() {
      this.$refs.upPwdForm.validate(valid => {
        if (valid) {
          this.saveLoading = true
          const saveFormItem = this.$coreHtml.post(
            'login/updatePWD',
            this.formItem
          )
          saveFormItem
            .then(data => {
              if (data.returnType == 'success') {
                this.saveLoading = false
                this.$notify({
                  title: '成功',
                  message: '密码修改成功',
                  type: 'success'
                })
                this.tfVisible = false
              }
            })
            .catch(e => {
              this.saveLoading = false
              const resultData = e.data
              if (resultData && resultData.returnType == 'error') {
                this.$alert(resultData.returnMsg, '提示', {
                  type: 'warning',
                  confirmButtonText: '确定'
                })
              } else {
                console.log('error:updatePWD/submitForm', e)
              }
            })
        } else {
          return false
        }
      })
    }
  }
}
</script>
